<!DOCTYPE html>
<html>

<head>
  <title>简单测试</title>
</head>

<body>
  <h1>简单测试页面</h1>

  <h2>测试GET请求</h2>
  <button onclick="testGet()">测试GET /users/123</button>

  <h2>测试POST请求</h2>
  <button onclick="testPost()">测试POST /users/123</button>

  <h2>结果</h2>
  <pre id="result"></pre>

  <script>
    async function testGet() {
      try {
        console.log('发送GET请求...');
        const response = await fetch('/users/123', { method: 'GET' });
        console.log('响应状态:', response.status);
        const text = await response.text();
        console.log('响应内容:', text);
        document.getElementById('result').textContent = `GET请求结果:\n状态: ${response.status}\n内容: ${text}`;
      } catch (error) {
        console.error('GET请求错误:', error);
        document.getElementById('result').textContent = `GET请求错误: ${error.message}`;
      }
    }

    async function testPost() {
      try {
        console.log('发送POST请求...');
        const response = await fetch('/users/123', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ name: '测试用户', age: 25 })
        });
        console.log('响应状态:', response.status);
        const text = await response.text();
        console.log('响应内容:', text);
        document.getElementById('result').textContent = `POST请求结果:\n状态: ${response.status}\n内容: ${text}`;
      } catch (error) {
        console.error('POST请求错误:', error);
        document.getElementById('result').textContent = `POST请求错误: ${error.message}`;
      }
    }
  </script>
</body>

</html>